<template>
  <Modal title="账户信息" :value="visible" width="300px" @on-cancel="onCancel" :mask-closable="false">
    <div>
      <Form ref="forms" :model="params">
        <FormItem prop="username">
          <Input type="text" v-model="params.username" placeholder="请输入用户名" readonly>
          <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="gender" label="性别" :label-width="40">
          <RadioGroup v-model="params.gender" readonly>
            <Radio label="1">男</Radio>
            <Radio label="2">女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem prop="mailNum">
          <Input type="email" v-model="params.mailNum" placeholder="请输入邮箱">
          <Icon type="ios-mail-outline" slot="prepend"></Icon></Input>
        </FormItem>
        <FormItem prop="telephone">
          <Input type="text" v-model="params.telephone" placeholder="请输入电话号码" :maxlength="11">
          <Icon type="ios-phone-portrait" slot="prepend"></Icon></Input>
        </FormItem>
        <FormItem prop="nickName">
          <Input type="text" v-model="params.nickName" placeholder="请输入昵称">
          <Icon type="md-person" slot="prepend"></Icon></Input>
        </FormItem>
        <FormItem prop="date">
          <DatePicker type="date" v-model="params.bornTime" placeholder="请选择出生年月" style="width:100%" :editable="false"></DatePicker>
        </FormItem>
      </Form>
    </div>
    <div class="text-center" slot="footer">
      <Button type="primary" @click="onModalOK">确定</Button>
    </div>
  </Modal>
</template>

<script>
import modalMixin from "@/mixins/crud.modal.js";
export default {
  name: "AdminModal",
  mixins: [modalMixin],
  data() {
    return {
      params: this.initData()
    };
  },
  methods: {
    initData() {
      return {
        username: "",
        gender: "",
        mailNum: "",
        telephone: "",
        nickName: "",
        date: ""
      };
    },
    onVisible() {
      //浅拷贝
      this.params = { ...this.params, ...this.row };
      this.params.gender = this.params.gender.toString();
    },
    onModalOK() {
      this.update();
    },
    async update() {
      const result = await this.$refs.forms.validate();
      if (!result) return;
      this.loading = true;
      await this.$http({
        method: "post",
        url: this.API.UPDATE_USERINFO,
        data: { ...this.params }
      });
      this.$Message.success("保存成功");
      setTimeout(() => {
        this.$router.push({ name: "Home" });
      }, 1100);
    }
  }
};
</script>

<style>
</style>
